import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import CityDetail from "../views/CityDetail.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  base: import.meta.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "weather",
      component: HomeView,
    },
    {
      path: "/citydetail/:city",
      name: "citydetail",
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: CityDetail,
      // props: true：将路由参数作为 props 传递给 SearchView 组件。这样，SearchView 组件可以直接通过 props 获取 city 参数的值
      props: true,
    },
  ],
});

export default router;
